<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝旭超市管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        section {
            margin-bottom: 20px;
        }

        input, button {
            margin-top: 5px;
            margin-bottom: 5px;
            padding: 10px;
            width: 200px;
        }

        button {
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
        }

        button:hover {
            background-color: #45a049;
        }

        input {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<h1>蓝旭超市管理系统</h1>

<section>
    <h2>注册</h2>
    <form id="registerForm">
        <input type="text" id="registerUsername" placeholder="用户名" required>
        <input type="password" id="registerPassword" placeholder="密码" required>
        <button type="submit">注册</button>
    </form>
</section>

<section>
    <h2>登录</h2>
    <form id="loginForm">
        <input type="text" id="loginUsername" placeholder="用户名" required>
        <input type="password" id="loginPassword" placeholder="密码" required>
        <button type="submit">登录</button>
    </form>
</section>

<section>
    <h2>录入商品</h2>
    <form id="insertProductForm">
        <button type="submit">录入商品</button>
    </form>
</section>

<section>
    <h2>查询商品</h2>
    <form id="searchProductForm">
        <input type="text" id="searchName" placeholder="商品名称" required>
        <button type="submit">查询</button>
    </form>
</section>

<section>
    <h2>购买商品</h2>
    <form id="purchaseProductForm">
        <input type="text" id="purchaseNumber" placeholder="商品ID" required>
        <button type="submit">购买</button>
    </form>
</section>

<section>
    <h2>删除商品</h2>
    <form id="deleteProductForm">
        <input type="text" id="deleteNumber" placeholder="商品ID" required>
        <button type="submit">删除</button>
    </form>
</section>

<script>
    document.getElementById('registerForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const username = document.getElementById('registerUsername').value;
        const password = document.getElementById('registerPassword').value;
        fetch('/user/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password })
        }).then(response => response.json())
            .then(data => alert('注册结果: ' + JSON.stringify(data)));
    });

    document.getElementById('loginForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const username = document.getElementById('loginUsername').value;
        const password = document.getElementById('loginPassword').value;
        fetch('/user/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password })
        }).then(response => response.json())
            .then(data => alert('登录结果: ' + JSON.stringify(data)));
    });

    document.getElementById('insertProductForm').addEventListener('submit', function(event) {
        event.preventDefault();
        fetch('/goods/insert', {
            method: 'POST'
        }).then(response => response.json())
            .then(data => alert('录入商品结果: ' + JSON.stringify(data)));
    });

    document.getElementById('searchProductForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const name = document.getElementById('searchName').value;
        fetch('/goods/search?name=' + encodeURIComponent(name), {
            method: 'GET'
        }).then(response => response.json())
            .then(data => alert('查询商品结果: ' + JSON.stringify(data)));
    });

    document.getElementById('purchaseProductForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const number = document.getElementById('purchaseNumber').value;
        fetch('/goods/purchase', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: `number=${encodeURIComponent(number)}`
        }).then(response => response.json())
            .then(data => alert('购买商品结果: ' + JSON.stringify(data)));
    });

    document.getElementById('deleteProductForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const number = document.getElementById('deleteNumber').value;
        fetch('/goods/del', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: `number=${encodeURIComponent(number)}`
        }).then(response => response.json())
            .then(data => alert('删除商品结果: ' + JSON.stringify(data)));
    });
</script>
</body>
</html>
